{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}知识点画像仪表板 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/profile_dashboard.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->~
    <div class="dashboard-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-2">
                    <i class="fas fa-brain me-2"></i>知识点画像仪表板
                </h1>
                <p class="mb-0 opacity-75">
                    全面了解您的知识点掌握情况，智能分析学习薄弱环节
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">

                    <a href="{% url 'score:score_list' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-chart-bar me-1"></i>成绩分析
                    </a>
                    <a href="{% url 'analysis:profile_statistics' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-chart-pie me-1"></i>数据统计
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 总体统计卡片 -->
    <div class="stats-grid fade-in-up">
        <div class="stat-card">
            <div class="stat-icon bg-primary text-white">
                <i class="fas fa-bullseye"></i>
            </div>
            <div class="stat-value text-primary">{{ total_knowledge_points }}</div>
            <div class="stat-label">总知识点数</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-success text-white">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-value text-success">{{ mastered_count }}</div>
            <div class="stat-label">已掌握知识点</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-warning text-white">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-value text-warning">{{ weak_count }}</div>
            <div class="stat-label">薄弱知识点</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-info text-white">
                <i class="fas fa-book-open"></i>
            </div>
            <div class="stat-value text-info">{{ learning_count }}</div>
            <div class="stat-label">学习中知识点</div>
        </div>
    </div>

    <div class="row">
        <!-- 主要内容区域 -->
        <div class="col-lg-8">
            <!-- 各科目知识点掌握情况 -->
            {% for subject_name, data in subjects_data.items %}
            <div class="subject-card fade-in-up">
                <div class="subject-header">
                    <h3 class="subject-title">
                        <i class="fas fa-book me-2"></i>{{ subject_name }}
                    </h3>
                    <div class="subject-stats">
                        <div class="subject-stat">
                            <span class="stat-number">{{ data.mastered_count }}/{{ data.total_points }}</span>
                            <span class="stat-text">已掌握</span>
                        </div>
                        <div class="subject-stat">
                            <span class="stat-number">{{ data.avg_mastery|floatformat:1 }}%</span>
                            <span class="stat-text">平均掌握度</span>
                        </div>
                    </div>
                </div>

                <!-- 掌握度进度条 -->
                <div class="mastery-progress">
                    <div class="mastery-progress-bar
                        {% if data.avg_mastery >= 80 %}bg-excellent
                        {% elif data.avg_mastery >= 60 %}bg-good
                        {% elif data.avg_mastery >= 40 %}bg-average
                        {% else %}bg-poor{% endif %}"
                        style="width: {{ data.avg_mastery }}%">
                    </div>
                </div>

                <div class="mastery-level">
                    <span class="mastery-rate">{{ data.avg_mastery|floatformat:1 }}% 掌握度</span>
                    <span class="mastery-label
                        {% if data.avg_mastery >= 80 %}bg-excellent text-white
                        {% elif data.avg_mastery >= 60 %}bg-good text-white
                        {% elif data.avg_mastery >= 40 %}bg-average text-dark
                        {% else %}bg-poor text-white{% endif %}">
                        {% if data.avg_mastery >= 80 %}优秀
                        {% elif data.avg_mastery >= 60 %}良好
                        {% elif data.avg_mastery >= 40 %}一般
                        {% else %}需加强{% endif %}
                    </span>
                </div>

                <!-- 知识点详情网格 -->
                <div class="knowledge-grid">
                    {% for profile in data.profiles %}
                    <div class="knowledge-card
                        {% if profile.mastery_level >= 0.8 %}border-excellent
                        {% elif profile.mastery_level >= 0.6 %}border-good
                        {% elif profile.mastery_level >= 0.4 %}border-average
                        {% else %}border-poor{% endif %}">

                        <div class="knowledge-header">
                            <h4 class="knowledge-name">
                                <!-- 修复：添加知识点详情链接 -->
                                <a href="{% url 'analysis:knowledge_point_detail' profile.id %}" class="text-decoration-none text-dark">
                                    {{ profile.knowledge_point.name }}
                                </a>
                            </h4>
                            <span class="mastery-badge
                                {% if profile.mastery_level >= 0.8 %}bg-excellent text-white
                                {% elif profile.mastery_level >= 0.6 %}bg-good text-white
                                {% elif profile.mastery_level >= 0.4 %}bg-average text-dark
                                {% else %}bg-poor text-white{% endif %}">
                                {{ profile.mastery_level|multiply:100|floatformat:0 }}%
                            </span>
                        </div>

                        <div class="knowledge-progress">
                            <div class="knowledge-progress-bar
                                {% if profile.mastery_level >= 0.8 %}bg-excellent
                                {% elif profile.mastery_level >= 0.6 %}bg-good
                                {% elif profile.mastery_level >= 0.4 %}bg-average
                                {% else %}bg-poor{% endif %}"
                                style="width: {{ profile.mastery_level|multiply:100 }}%">
                            </div>
                        </div>

                        <div class="knowledge-meta">
                            <span>学习状态:
                                <span class="
                                    {% if profile.learning_status == 'mastered' %}text-excellent
                                    {% elif profile.learning_status == 'learning' %}text-good
                                    {% else %}text-poor{% endif %}">
                                    {{ profile.get_learning_status_display }}
                                </span>
                            </span>
                            {% if profile.next_review_date %}
                            <span>复习: {{ profile.next_review_date }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% empty %}
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">暂无知识点数据</h4>
                <p class="text-muted">开始记录成绩后，系统会自动生成知识点画像</p>
            </div>
            {% endfor %}
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 学习洞察 -->
            <div class="sidebar-section fade-in-up">
                <h3 class="sidebar-title">
                    <i class="fas fa-lightbulb text-warning"></i>学习洞察
                </h3>
                {% if insights %}
                    {% for insight in insights %}
                    <div class="insight-item border-{{ insight.type|default:'info' }}">
                        <h6 class="mb-1">{{ insight.title|default:"学习建议" }}</h6>
                        <p class="mb-0 text-muted small">{{ insight.description|default:"继续努力学习" }}</p>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-chart-line fa-2x text-muted mb-2"></i>
                        <p class="text-muted small mb-0">继续学习以获取个性化洞察</p>
                    </div>
                {% endif %}
            </div>

            <!-- 薄弱知识点 -->
            <div class="sidebar-section fade-in-up">
                <h3 class="sidebar-title">
                    <i class="fas fa-exclamation-triangle text-danger"></i>薄弱知识点
                </h3>
                {% if weak_points %}
                    {% for point in weak_points %}
                    <div class="weak-point-item">
                        <div class="point-info">
                            <h6 class="point-name">
                                <a href="{% url 'analysis:knowledge_point_detail' point.id %}" class="text-decoration-none text-dark">
                                    {{ point.knowledge_point.name }}
                                </a>
                            </h6>
                            <p class="point-meta">{{ point.knowledge_point.subject.name }} · 掌握度 {{ point.mastery_level|multiply:100|floatformat:0 }}%</p>
                        </div>
                        <span class="badge bg-danger">{{ point.mastery_level|multiply:100|floatformat:0 }}%</span>
                    </div>
                    {% endfor %}
                    <div class="text-center mt-2">
                        <!-- 修复：使用正确的URL名称 -->
                        <a href="{% url 'analysis:weak_points_list' %}" class="btn btn-outline-danger btn-sm">
                            查看全部 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                        <p class="text-muted small mb-0">暂无薄弱知识点，继续保持！</p>
                    </div>
                {% endif %}
            </div>

            <!-- 需要复习 -->
            <div class="sidebar-section fade-in-up">
                <h3 class="sidebar-title">
                    <i class="fas fa-clock text-info"></i>需要复习
                </h3>
                {% if need_review %}
                    {% for item in need_review %}
                    <div class="review-item">
                        <i class="fas fa-book text-primary"></i>
                        <div class="point-info">
                            <h6 class="point-name">
                                <a href="{% url 'analysis:knowledge_point_detail' item.id %}" class="text-decoration-none text-dark">
                                    {{ item.knowledge_point.name }}
                                </a>
                            </h6>
                            <p class="point-meta">应于 {{ item.next_review_date }} 前复习</p>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="text-center mt-2">
                        <a href="{% url 'analysis:learning_progress' %}" class="btn btn-outline-info btn-sm">
                            学习进度 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-check fa-2x text-success mb-2"></i>
                        <p class="text-muted small mb-0">暂无需要复习的知识点</p>
                    </div>
                {% endif %}
            </div>

            <!-- 分析工具导航 -->
            <div class="sidebar-section fade-in-up">
                <h3 class="sidebar-title">
                    <i class="fas fa-tools text-primary"></i>分析工具
                </h3>
                <div class="d-grid gap-2">
                    <a href="{% url 'analysis:learning_progress' %}" class="btn btn-outline-success btn-sm">
                        <i class="fas fa-chart-line me-1"></i>学习进度
                    </a>
                    <a href="{% url 'analysis:practice_history' %}" class="btn btn-outline-warning btn-sm">
                        <i class="fas fa-history me-1"></i>练习历史
                    </a>
                    <a href="{% url 'analysis:profile_statistics' %}" class="btn btn-outline-info btn-sm">
                        <i class="fas fa-chart-pie me-1"></i>数据统计
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 添加简单的动画效果
document.addEventListener('DOMContentLoaded', function() {
    // 进度条动画
    const progressBars = document.querySelectorAll('.mastery-progress-bar, .knowledge-progress-bar');
    progressBars.forEach(bar => {
        const width = bar.style.width;
        bar.style.width = '0';
        setTimeout(() => {
            bar.style.width = width;
        }, 100);
    });

    // 卡片悬停效果
    const cards = document.querySelectorAll('.stat-card, .subject-card, .knowledge-card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
            this.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.12)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)';
        });
    });

    // 知识点卡片点击效果
    const knowledgeCards = document.querySelectorAll('.knowledge-card');
    knowledgeCards.forEach(card => {
        card.style.cursor = 'pointer';
        card.addEventListener('click', function() {
            const link = this.querySelector('a');
            if (link) {
                window.location.href = link.href;
            }
        });
    });
});
</script>
{% endblock %}